<template>
  <section class="container">
    <banner :banner="home.carousel" />
    <div class="main w1200 cf">
      <div class="main-content main-child fl">
        <h1>热门游戏<nuxt-link to="">更多</nuxt-link></h1>
        <ul class="main-list">
          <li v-for="item in home.hotgame" :key="item.index">
            <nuxt-link :to="'/game/'+item.game_id" class="main-content-item">
              <img :src="item.imgurl" alt="">
              <div>
                <p class="main-item-name">{{item.name}}</p>
                <p>{{item.typename}}</p>
              </div>
            </nuxt-link>
          </li>
        </ul>
      </div>
      <div class="main-side main-child fr">
        <h1>{{lists.indextypegamelist[0].indextypearr.typename}}<nuxt-link to="">更多</nuxt-link></h1>
        <ul>
          <li v-for="(side,index) in lists.indextypegamelist[0].datalist" :key="index">
            <nuxt-link :to="'/game/'+side.gameid" class="main-content-item">
              <div class="main-side-index">{{index}}</div>
              <img :src="side.micon" alt="">
              <div>
                <p>{{side.name}}</p>
                <p>{{side.adsize}}|{{side.typename}}</p>
                <p>{{side.publicity}}</p>
              </div>
            </nuxt-link>
          </li>
        </ul>
      </div><!---->
      <div class="main-content main-child fl">
        <h1>最新游戏<nuxt-link to="">更多</nuxt-link></h1>
        <ul class="cf">
          <li class="fl" v-for="item in home.newgame" :key="item.index">
            <nuxt-link :to="'/game/'+item.game_id" class="main-content-item">
              <img :src="item.imgurl" alt="">
              <div>
                <p class="main-item-name">{{item.name}}</p>
                <p>{{item.typename}}</p>
              </div>
            </nuxt-link>
          </li>
        </ul>
      </div>
      <div class="main-side main-child fr">
        <h1>{{lists.indextypegamelist[1].indextypearr.typename}}<nuxt-link to="">更多</nuxt-link></h1>
        <ul>
          <li v-for="(side,index) in lists.indextypegamelist[1].datalist" :key="index">
            <nuxt-link :to="'/game/'+side.gameid" class="main-content-item">
              <div class="main-side-index">{{index}}</div>
              <img :src="side.micon" alt="">
              <div>
                <p>{{side.name}}</p>
                <p>{{side.adsize}}|{{side.typename}}</p>
                <p>{{side.publicity}}</p>
              </div>
            </nuxt-link>
          </li>
        </ul>
      </div><!---->
    </div> 
  </section>
</template>

<script>
import Banner from '~/components/Banner';
//import {mapState} from 'vuex';
export default {
  name:'index',
  layout:'index',
  //middleware:'index',
  head: {
    title: '首页'
  },
  /*computed:{
    ...mapState([
      'indexData'
    ])
  },*/
  data(){
    return{//via.placeholder.com/1200x400
      
    }
  },
  async asyncData({ store }){
    try {
      const [caro, list] = await Promise.all([
        store.$axios.get('/php/index/index'),
        store.$axios.get('/php/index/indextypegamelist')
      ]);
      //console.log(store)
      return {
        home:caro.data.data,
        lists:list.data.data
      };
    }catch(error){
        console.log(error);
    }
  },
  components: {
    Banner
  },
  methods:{
    
  },
  mounted(){
    //this.$store.dispatch('login',{username:'chpddd',password:'123456'});
  }
}
</script>

<style scoped>
  .main{
    padding:.740741rem 0;
  }
  .main-child h1,.main-list{
    display: flex;
  }
  .main-list{
    flex-wrap:wrap;
  }
  .main-content{
    width:15.185185rem;
    margin-right:.555556rem;
  }
  .main-side{
    width:6.481481rem;
  }
  .main-content ul li{
    padding: .37037rem 0;
  }
  .main-content .main-content-item{
    width:3.981481rem;
    margin:0 .37037rem;
  }
  .main-item-name{
    margin-bottom:.740741rem;
  }
  .main-side .main-content-item{
    padding:.185185rem 0;
  }
  .main-side .main-content-item div p{
    margin:.277778rem 0;
  }
  .main-child h1{
    /*justify-content: center;*/
    align-items: center;
  }
  .main-content-item img,.main-content-item >div{
    display:inline-block;
    vertical-align: middle;
  }
  .main-content-item img{
    width:1.759259rem;
    margin-right: .462963rem;
  }
  .main-content-item div p{
    font-size: 14px;
    width:2.037037rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .main-child h1{
    margin-bottom: .37037rem;
    font-size: 18px;
    text-indent: .185185rem;
    line-height: 2;
    border-bottom: 2px solid #a06f04;
  }
  .main-child h1,.main-child h1 a{
    color: #a06f04;
  }
  .main-child h1 a{
    font-size: 14px;
    margin-right: .277778rem;
    flex:1;
    text-align: right;
  }
  .main-side-index{
    color:#bb4e4e;
    font-size: 20px;
    margin:0 .555556rem;
  }

.title {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

